<template>
  <div class="goods-detail">
    <div class="main">
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="item in goodsInfo.gallery"
          :key="item.id"
          style="width: 375px"
        >
          <img class="banner-img" :src="item.img_url" alt="" />
        </van-swipe-item>
      </van-swipe>
      <div class="info" v-if="goodsInfo.info">
        <h2>{{ goodsInfo.info.name }}</h2>
        <p class="desc">{{ goodsInfo.info.goods_brief }}</p>
        <p class="price">￥{{ goodsInfo.info.retail_price }}</p>
      </div>
      <van-cell is-link title="请选择规格数量" @click="show = true" />
      <div class="attribute">
        <div class="title">商品参数</div>
        <ul>
          <li v-for="(item, index) in goodsInfo.attribute" :key="index">
            <span class="attr_name">{{ item.name }}: </span>
            <span class="attr_value">{{ item.value }}</span>
          </li>
        </ul>
      </div>
      <!-- 详情描述 -->
      <div
        class="goods_desc"
        v-if="goodsInfo.info"
        v-html="goodsInfo.info.goods_desc"
      ></div>
      <!-- 常见问题 -->
      <div class="issue">
        <div class="title">常见问题</div>
        <div class="item" v-for="item in goodsInfo.issue" :key="item.id">
          <div class="question">{{ item.question }}</div>
          <div class="answer">{{ item.answer }}</div>
        </div>
      </div>
      <!-- 商品推荐 -->
      <div class="goodslist">
        <div class="title">大家都在看</div>
        <ul>
          <li
            v-for="item in goodsInfo.productList"
            :key="item.id"
            @click="itemClick(item)"
          >
            <img :src="item.list_pic_url" alt="" />
            <p class="name">{{ item.name }}</p>
            <p class="price">￥{{ item.retail_price }}</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="footer">
      <div class="collectBtn" @click="collectBtnClick">
        <van-icon
          :name="goodsInfo.collected ? 'star' : 'star-o'"
          :color="goodsInfo.collected ? '#b4282b' : ''"
        />
      </div>
      <div class="cartBtn" @click="toCart()">
        <van-icon name="cart-o" :badge="goodsInfo.allnumber" />
      </div>
      <div class="buy" @click="nowBuy()">立即购买</div>
      <div class="addCart" @click="addCart()">加入购物车</div>
    </div>
    <!-- popup弹窗 -->
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div class="pop-content" v-if="goodsInfo.info">
        <div class="pop-head">
          <img :src="goodsInfo.info.primary_pic_url" alt="" />
          <div>
            <p class="price">￥{{ goodsInfo.info.retail_price }}</p>
            <p>请选择数量</p>
          </div>
        </div>
        <div class="buyNum">
          <p>数量</p>
          <van-stepper v-model="num" />
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { detailaction, addcollect, addCart } from "@/api/goodsdetail/index";
import { submitAction } from "@/api/cart/index";
export default {
  data() {
    return {
      goodsId: 0,
      goodsInfo: {},
      show: false, // 规格数量弹窗
      num: 1,
    };
  },
  methods: {
    // 收藏点击
    collectBtnClick() {
      this.goodsInfo.collected = !this.goodsInfo.collected;
      addcollect({
        goodsId: this.goodsId,
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
      });
    },
    // 加入购物车
    addCart() {
      if (this.show) {
        addCart({
          goodsId: this.goodsId,
          number: this.num,
          openId: localStorage.getItem("openId"),
        }).then((res) => {
          console.log(res);
          this.goodsInfo.allnumber += this.num;
        });
      } else {
        this.show = true;
      }
    },
    // 立即购买
    nowBuy() {
      if (this.show) {
        submitAction({
          allPrise: this.goodsInfo.info.retail_price * this.num,
          goodsId: this.goodsId,
          openId: localStorage.getItem("openId"),
        }).then((res) => {
          if (res.data.data) {
            this.$router.push("/cart/orderconfirm");
          }
        });
      } else {
        this.show = true;
      }
    },

    // 推荐点击
    itemClick(item) {
      this.$router.push({
        path: "/goodsdetail",
        query: {
          id: item.id,
        },
      });
    },
    toCart() {
      this.$router.push("/cart");
    },
  },
  created() {
    let id = this.$route.query.id;
    this.goodsId = id;
    detailaction({
      id,
      openId: localStorage.getItem("openId"),
    }).then((res) => {
      console.log(res);
      this.goodsInfo = res.data;
    });
  },
};
</script>
<style lang="scss">
@import "./index.scss";
</style>

<style>
.goods_desc {
  margin-top: 10px;
}
.goods_desc img {
  width: 100%;
}
</style>
